<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
</head>
<body>
    <div id="content">
        <canvas id="ground"></canvas>

        <div id="control">
            <div>贪吃蛇</div>
            <div></div>
            <div class="btn"><span>开始游戏</span></div>
            <div class="btn"><span>查看榜单</span></div>
        </div>

        <dialog id="dial" class="popup">
            <form method="dialog">
                <p>新 的 记 录</p>
                <input type="text" id="uname" placeholder="请输入您的昵称，长度不超过6个汉字">
                <div id="dial-btn-group">
                    <button class="btn" value="无名"><span>提交</span></button>
                    <button class="btn" value=""><span>放弃</span></button>
                </div>
            </form>
        </dialog>

        <dialog id="rankings" class="popup">
            <p>排 行 榜</p>
            <div id="records">
                <div class="record-item">
                    <div>名次</div>
                    <div>昵称</div>
                    <div>分数</div>
                    <div>日期</div>
                </div>
            </div>
            <form method="dialog">
                <button class="close-icon"><span>×</span></button>
            </form>
        </dialog>
    </div>

</body>
</html>